<template>
	<view>
		<view @click="handelClick()" class="load_more">
			{{contentText}}
			<u-icon color='#000' :name="iconType"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "loadMore",
		data() {
			return {
				contentText: '展开完整信息',
				iconType: 'arrow-down'
			};
		},
		props: {
			loadMoreFlag: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			loadMoreFlag() {
				if (this.loadMoreFlag == true) {
					this.contentText = '收起'
					this.iconType = 'arrow-up'
				} else {
					this.contentText = '展开完整信息'
					this.iconType = 'arrow-down'
				}
			}
		},
		methods: {
			handelClick() {
				this.$emit('update:loadMoreFlag', !this.loadMoreFlag)
			}
		}
	}
</script>

<style lang="scss">
	.load_more {
		display: flex;
		justify-content: center;
		margin: 20rpx auto;
		text-align: center;
		width: 300rpx;
		height: 60rpx;
		border: 1px solid #dadbde;
		border-radius: 150rpx;
		line-height: 60rpx;
		font-size: 25rpx;
	}
</style>